<template>
  <view>
    <!-- 自定义导航栏 -->
    <uniNavBar title="确认支付"
               left-text="关闭"
               fixed="true"
               status-bar="true"
               @clickRight="goBack"></uniNavBar>
    <view class="pay-main">
      <label>
        <view class="pay-item">
          <image class="pay-img"
                 src="../../static/img/wxf.png"
                 mode=""></image>
          <view class="">
            <view class="">微信支付</view>
            <view class="pay-txt">推荐有微信账户的用户使用</view>
          </view>
          <label class="radio">
            <radio value=""
                   color="#ff115c" /><text></text>
          </label>
        </view>
      </label>
      <label>
        <view class="pay-item">
          <image class="pay-img"
                 src="../../static/img/zfb.png"
                 mode=""></image>
          <view class="">
            <view class="">支付宝</view>
            <view class="pay-txt">推荐有支付宝的用户使用</view>
          </view>
          <label class="radio">
            <radio value=""
                   color="#ff115c" /><text></text>
          </label>
        </view>
      </label>
    </view>
    <!-- 去支付 -->
    <view class="pay-foot">
      <view class="total">
        <text class="f-color">合计：</text>
        <text class="total-price">￥ 269.00</text>
      </view>
      <view class="go-pay"
	  @tap="goPayment"
      >去支付</view>
    </view>
  </view>
</template>

<script>
import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    uniNavBar
  },
  methods: {
    // 点击关闭返回上一页
    goBack () {
      uni.navigateBack({
        delta: 1
      })
    },
    goPayment() {
		uni.navigateTo({
			url:"../payment-success/payment-success"
		})
	}
  }
}
</script>

<style scoped>
.pay-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #f7f7f7;
}
.pay-img {
  width: 100rpx;
  height: 100rpx;
}
.pay-item {
  /* color: #CCCCCC; */
}
.pay-foot {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.total {
  flex: 1;
  background-color: #000000;
  line-height: 100rpx;
  padding-left: 40rpx;
}
.go-pay {
  color: #ffffff;
  background-color: #ff115c;
  line-height: 100rpx;
  text-align: center;
  width: 220rpx;
}
.total-price {
  color: #ffffff;
}
</style>
